<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录</title>
    <%@include file="/link/link-head.jsp" %>
</head>
<script type="application/javascript">

</script>
<body>

<div id="div_regist">
    <div id="div_title">
        <span id="span_1" style="color: cadetblue"></span>
        <span id="span_2" style="color: palevioletred"></span>
    </div>
    <form action="${pageContext.request.contextPath}/teacher/login" method="post"
          id="form_login_tname">
        <table>
            <tr>
                <td>用户名</td>
                <td>
                    <input type="text" name="username">
                    <span style="color: red">${pageContext.exception.message}</span>
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td>
                    <input type="password" name="password">
                </td>
            </tr>
            <tr>
                <td>
                    <img src="${pageContext.request.contextPath}/teacher/getImage" id="changeCode">
                </td>
                <td>
                    <input type="text" name="code" id="inCode" onchange="checkCode()">
                    <span style="color: red" id="codems"></span>
                </td>
            </tr>
            <tr>
                <td><input type="submit" value="登录" disabled="disabled"></td>
                <td></td>
            </tr>
        </table>
    </form>
    <form id="form_login_tphone" method="post" action="${pageContext.request.contextPath}/teacher/loginPhone">
        <table>
            <tr>
                <th>用户电话：</th>
                <td>
                    <input type="text" name="phone" placeholder="请输入电话号码"/>
                    <span style="color: red" id="phonemsg"></span>
                </td>
            </tr>
            <tr>
                <th><input type="text" name="phoneCode" id="inPhoneCode" placeholder="请输入短信验证码"
                           onchange="checkPhoneCode()"/></th>
                <td>
                    <input type="button" value="获取短信验证码" onclick="sendPhoneMsg()"/>
                    <span style="color: red" id="phonecodemsg"></span>
                </td>
            </tr>
            <tr>
                <th colspan="2">
                    <input type="submit" value="用户名登录" disabled="disabled"/>
                </th>
            </tr>
        </table>
    </form>
</div>
<a href="register.jsp">还没有账号注册</a>
</body>
<script>
    $(function () {
        //切换 短信和 账号登录
        showHideChange();
        $("#span_2").bind("click", function () {
            $("#form_login_tname").toggle();
            showHideChange();
        });

        function showHideChange() {
            if ($("#form_login_tname:hidden").length == 0) {
                $("#form_login_tphone").hide();
                $("#span_1").text("账号登录");
                $("#span_2").text("短信登录");
            } else {
                $("#form_login_tphone").show();
                $("#span_1").text("短信登录");
                $("#span_2").text("账号登录");
            }
        }

        //图片点击时间
        $("#changeCode").click(function () {
            //加时间戳
            var date = new Date().getTime();
            $("#changeCode").attr("src", "${pageContext.request.contextPath}/teacher/getImage?" + date);
        })
    })

    //校验 图片验证码
    function checkCode() {
        let inCode = $("#inCode");
        let tcode = inCode.val();
        if (tcode != '' && tcode != undefined) {
            let codems = $("#codems");
            $.ajax({
                url: "${pageContext.request.contextPath}/teacher/checkImgCode",
                data: {"tcode": tcode},
                type: "post",
                dataType: "text",
                success: function (data) {
                    if (data == 1) {
                        codems.text("验证码正确");
                        $('input[type=submit]').removeAttr("disabled");
                    } else if (data == 0) {
                        codems.text("验证码错误");
                    }
                },
                error: function () {
                    codems.text("服务器出现错误");
                }
            })
        }
    }


    //发送短息
    function sendPhoneMsg() {
        let $input = $("input[name='phone']");
        let phone = $input.val();
        if (phone != '' && phone != undefined) {
            $.ajax({
                url: "${pageContext.request.contextPath}/teacher/sendPhoneMsg",
                data: {"phone": phone},
                type: "post",
                success: function (data) {
                    if (data == 1) {
                        $("#phonecodemsg").text("短信发送成功");
                    } else if (data == 0) {
                        $("#phonecodemsg").text("短信发送失败");
                    }
                }
            })
        }
    }

    //校验 短信验证码
    function checkPhoneCode() {
        let inCode = $("#inPhoneCode");
        let pcode = inCode.val();
        if (pcode != '' && pcode != undefined) {
            let codemsg = $("#phonecodemsg");
            $.ajax({
                url: "${pageContext.request.contextPath}/teacher/checkPhoneCode",
                data: {"phoneCode": pcode},
                type: "post",
                dataType: "text",
                success: function (data) {
                    if (data == 1) {
                        codemsg.text("短信验证码正确");
                        $('input[type=submit]').removeAttr("disabled");
                    } else if (data == 0) {
                        codemsg.text("短信验证码错误");
                    }
                },
                error: function () {
                    codemsg.text("服务器出现错误");
                }
            })
        }
    }
</script>
</html>
